<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算器</title>
	<style>
		html,body,div,span{padding: 0;margin: 0;border: 0;outline: 0;box-sizing: border-box;}
		.calc{width: 200px;border: 1px solid #ddd;margin: 100px auto;background-color: #ddd;}
		.calc::after{display: block;content: "";clear: both;}
		.screen{height: 70px;width: 98%;border: 2px solid #333;margin: 20px auto 10px;text-align: right;word-wrap: break-word;overflow: auto;}
		.screen::-webkit-scrollbar{width: 0px;background-color: gray;}
		.screen::-webkit-scrollbar-thumb{width:0px;border-radius: 5px;background-color: blue;}
		.sp{display:inline-block;width: 25%;height: 50px;float: left;text-align: center;line-height: 50px;background-color: snow;border: 2px solid #ddd;}

	</style>
</head>
<body>
	<div class="calc">
		<div class="screen" id="screen"></div>
		<span class="sp">7</span>
		<span class="sp">8</span>
		<span class="sp">9</span>
		<span class="sp">/</span> 
		<span class="sp">4</span>
		<span class="sp">5</span>
		<span class="sp">6</span>
		<span class="sp">*</span> 
		<span class="sp">1</span>
		<span class="sp">2</span>
		<span class="sp">3</span>
		<span class="sp">-</span> 
		<span class="sp">0</span>
		<span class="sp" id="c">C</span> 
		<span class="sp result" id="result">=</span> 
		<span class="sp">+</span> 
	</div>
	<script>
		var span = document.getElementsByTagName('span');
		var screen = document.getElementById('screen');
		var reslut = document.getElementById('result');
		var c = document.getElementById('c');
		var a = 0; //用来控制screen中数据是否清空 值为1：清空  值为0：不清空

		/*将点击选中的内容显示到screen中*/
		for(var i=0;i<span.length;i++){
			
			span[i].onclick = function(){
				if(a == 0){
					screen.innerText += this.innerText;//不清空
				}else{
					screen.innerText = this.innerText;//清空
					a = 0;
				}
				screen.scrollTop = screen.scrollHeight;
			}
		}


		/*=号触发的事件*/
		result.onclick = function(){
			screen.innerText = eval(screen.innerText);
			a = 1;
		}

		/*C清除键触发的事件*/
		c.onclick = function(){
			//screen.innerText = '';
			screen.innerText = screen.innerText.substr(-screen.innerText.length,screen.innerText.length-1); //每次删最后一个数字
		}

		/*键位绑定*/
		document.onkeyup = function (event) {
            var e = event || window.event;
            var keyCode = e.keyCode || e.which;
            switch (keyCode) {
                case 96:
                    span[12].onclick();
                    break;
                case 97:
                    span[8].onclick();
                    break;
                case 98:
                    span[9].onclick();
                    break;
                case 99:
                    span[10].onclick();
                    break;
                case 100:
                    span[4].onclick();
                    break;
                case 101:
                    span[5].onclick();
                    break;
                case 102:
                    span[6].onclick();
                    break;
                case 103:
                    span[0].onclick();
                    break;
                case 104:
                    span[1].onclick();
                    break;
                case 105:
                    span[2].onclick();
                    break;
                case 107:
                    span[15].onclick();
                    break;
                case 109:
                    span[11].onclick();
                    break;
                case 106:
                    span[7].onclick();
                    break;
                case 111:
                    span[3].onclick();
                    break;
                case 108:
                    span[14].onclick();
                    break;
                case 13:
                    span[14].onclick();
                    break;
                case 8:
                    span[13].onclick();
                    break;
                default:
                    break;
	        }
	    }
		
	</script>
</body>
</html>